<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/8/16
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>首页</title>
    <style>
        #frame1{
            position:absolute;
            top: -20px;
            left: 0px;
            width: 1500px;
            height: 100px;
            background-color: rgba(246, 235, 221, 0.329);
        }
        #photo1,#photo2,#photo3,#photo4,#photo5{
            position:relative;
            top: 130px;
            left: 230px;
            float: left;
            margin-right: 10px;
        }
        #photo6,#photo7,#photo8,#photo9,#photo10{
            position:relative;
            top: 110px;
            left: 230px;
            float: left;
            margin-right: 10px;
        }
        .books {
            top: 120px;
            left: 230px;
            width: 800px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
        }
        #ti{
            position:absolute;
            top: 90px;
            left: 230px;
            font-size:25px;
        }
        #ti2{
            position:absolute;
            top: 90px;
            left: 1100px;
            font-size:25px;
        }
        #p1{
            position:absolute;
            top: 160px;
            left: 1100px;
            width: 250px;
            height: 490px;
        }
        button[name="first"]{
            appearance: none;
            position: absolute;
            background-color: rgba(255, 255, 255, 0);
            border: 0;
            color: rgba(53, 53, 53, 0.91);
            top: 30px;
            left:1140px;
            font-size: 20px;
        }
        button[name="exit"]{
            appearance: none;
            position: absolute;
            background-color: rgba(255, 255, 255, 0);
            border: 0;
            color: rgba(51, 51, 51, 0.91);
            top: 30px;
            left:1260px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<p id="ti">热门书籍</p>
<p id="frame1"></p>
<button type="button" class="btn btn-default" onclick="window.location.href='1.jsp'" name="first" >
    <span class="glyphicon glyphicon-home">首页</span>
</button>
<button type="button" class="btn btn-default" onclick="window.location.href='a.jsp'" name="exit" >
    <span class="glyphicon glyphicon-off">登录</span>
</button>
<div class="books">
    <p id="photo1"><img src="https://img9.doubanio.com/view/subject/s/public/s34850014.jpg" width="130",height="180"><br>香料之路<br><small>约翰凯伊</small></p>
    <p id="photo2"><img src="https://img2.doubanio.com/view/subject/s/public/s34909721.jpg" width="130",height="180"><br>蛋先生的学术<br><small>施爱东</small></p>
    <p id="photo3"><img src="https://img3.doubanio.com/view/subject/s/public/s34911662.jpg" width="130",height="180"><br>生活在低处<br><small>胡安焉</small></p>
    <p id="photo4"><img src="https://img3.doubanio.com/view/subject/s/public/s34921093.jpg" width="130",height="180"><br>上升的一切必将会和<br><small>弗兰纳里</small></p>
    <p id="photo5"><img src="https://img3.doubanio.com/view/subject/s/public/s34903537.jpg" width="130",height="180"><br>书写还有未来<br><small>威廉·弗卢塞尔</small><br></p>
    <p id="photo6"><img src="https://img2.doubanio.com/view/subject/s/public/s34910141.jpg" width="130",height="180"><br>凯鲁亚克与金斯堡<br><small>杰克·凯鲁亚克</small></p>
    <p id="photo7"><img src="https://img9.doubanio.com/view/subject/s/public/s34914614.jpg" width="130",height="180"><br>民众的愤怒<br><small>巴里</small></p>
    <p id="photo8"><img src="https://img2.doubanio.com/view/subject/s/public/s34898241.jpg" width="130",height="180"><br>银河边缘019<br><small>杨枫</small></p>
    <p id="photo9"><img src="https://img1.doubanio.com/view/subject/s/public/s34914650.jpg" width="130",height="180"><br>规制如何让生财<br><small>黄国信</small></p>
    <p id="photo10"><img src="https://img9.doubanio.com/view/subject/s/public/s34877166.jpg" width="130",height="180"><br>医院的深渊<br><small>高梨有希子</small></p>
</div>
<p id="ti2">热门书籍</p>
<img src="图书热门榜单.png" id="p1"/>
</body>
</html>
